<template>
	<view class="container">
		<view class="tui-addr-box">
			<form @submit="formSubmit" @reset="formReset">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">详细地址</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="shop_address" v-model="company_address_detail"
							placeholder="请输入详细地址" maxlength="100" type="text" style="width:360rpx"/>
						<view class="yui-location" @tap="maps()">
							<tui-icon name="gps" :size="18" :color="'#ee980e'"></tui-icon>获取地址</view>
					</view>
				</tui-list-cell>
				
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商家电话</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="shop_phone" v-model="shopInfo.shop_phone"
							placeholder="请输入申请人电话" maxlength="20" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell" @click="show()">
						<view class="tui-title">开始营业时间</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="begtime" v-model="begtime" :readonly="true" disabled
							placeholder="请输入开始营业时间" maxlength="20" type="text" @click="show()"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell"  @click="shows()">
						<view class="tui-title">结束营业时间</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="endtime" v-model="endtime" disabled
							placeholder="请输入结束营业时间" maxlength="20" type="text" @click="shows()"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商家介绍</view>
	
							<textarea class="tui-textarea" name="shop_description" placeholder="" maxlength="200" v-model="shopInfo.shop_description"
								placeholder-class="tui-phcolor-color" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">平台抽佣比例</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="shopInfo.give_point_proportion"
							placeholder="平台分润最高不超30%" maxlength="50" type="text" disabled/>
					</view>
				</tui-list-cell>
				
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">商家门店照片</view>
						<view class="fin_img tui-upload-item" v-for="(item,index) in imgs" :key="index">
						
							<image :src="item" class='tui-upload-img' @tap="previewImage" mode="aspectFill"
								:id="item"></image>
							<view class="tui-upload-del">
								<tui-icon color="#ed3f14" :size="18" name="close-fill" :index="index"
									@click="deleteImage"></tui-icon>
							</view>
						</view>
						<view class="fin_img tui-upload-add" v-if="imgs.length <1" hover-class="tui-opcity"
							:hover-stay-time="150" @tap="chooseImages">
							<view class="icon_cam">
								<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>
						
							</view>
							<view class="fin_txt">上传照片</view>
						
						</view>
					</view>
				</tui-list-cell>
				<view class="ag_title">
					<radio-group @change="change" style="transform:scale(0.7)" color="#e41f19">
						<radio color="#e41f19" />
					</radio-group>
				<!-- 	<view>我已申请微信认证并且正式上线</view> -->
					<view class="agreement" @tap="">我已申请微信认证并且正式上线</view>
				</view>

				<!-- 保存地址 -->
				<view class="tui-btn__box">
					<view class="tui-addr-save">
						<tui-button shadow type="danger" height="88rpx" shape="circle" v-if="checked" formType="submit"
							:loading="isloading" :disabled="isdisabled">点击修改</tui-button>
						<tui-button shadow type="black" disabled height="88rpx" shape="circle" v-else>点击修改</tui-button>
					</view>
				</view>
			</form>
		</view>
		<tui-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
		 :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="changeBegintime"></tui-datetime>
		 <tui-datetime ref="dateTimes" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
		  :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="changeEndtime"></tui-datetime>
	</view>
</template>
<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				checked: false,
				array: [],
				index: 0,
				longitude: '',
				imgs:[],
				begtime:'08:00',
				endtime:'16:00',
				selected: false,
				value: [0, 0, 0],
				company_address_detail:'',
				n_company_address_detail:'',
				showPickerStatus: false,
				shopInfo: {
					addressee: "",
					mobile: "",
					phone: "",
					province: "",
					city: "",
					district: "",
					address: "",
					zip_code: "",
					idcard: '',
				}, //  地址	
				latitude: '',
				avatar:'',
				isdisabled: false,
				isloading: false,
				shop_id: "",
				type: 8,
				startYear: 1980,
				endYear: 2030,
				cancelColor: '#888',
				color: '#5677fc',
				setDateTime: '',
				radius:false,
				worker_time:'',
				unitTop:false,
				value:'',
			};
		},
		onShow() {
			this.tui.haslogin();
			this.inits()	
		},
	
		methods: {
			show: function() {
			
				this.cancelColor = '#888';
				this.color = '#e41f19';
				this.setDateTime = '';
				this.startYear = 1980;
				this.endYear = 2030;
				this.unitTop = false;
				this.radius = false;	
				this.type = 4;
				this.$refs.dateTime.show();
			},
			shows: function() {
		
				this.cancelColor = '#888';
				this.color = '#e41f19';
				this.setDateTime = '';
				this.startYear = 1980;
				this.endYear = 2030;
				this.unitTop = false;
				this.radius = false;	
				this.type = 4;
				this.$refs.dateTimes.show();
			},
			change(e) {
				this.value = e.detail.value;
				this.checked = true;
			},
			changeBegintime: function(e) {
				this.begtime = e.result;
			},
			changeEndtime: function(e) {
			
				this.endtime= e.result;
			},
			maps() {
				uni.chooseLocation({
					success: (res) => {
						this.n_company_address_detail = res.address;
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.latitude_longitude= res.latitude+","+res.longitude
					}
				});

			},
			inits() {
				let token = this.tui.getToken();
				let joiningTrader = {
					token: token,
				};
				let shopInfo = this.tui.request('shop', 'post', joiningTrader, 1000, 1, '', 'shopInfo');
				Promise.resolve(shopInfo).then((value) => {
					if (value.code == 200) {
						this.shopInfo = value.data
						this.imgs[0]=this.shopInfo.shop_avatar;
						this.company_address_detail=this.n_company_address_detail?this.n_company_address_detail:value.data.shop_address;
						this.latitude_longitude =  this.shopInfo.latitude_longitude;
						this.begtime=this.shopInfo.begtime;
						this.endtime=this.shopInfo.endtime;
					}
				})
			},
			previewImage: function(e) {
				uni.previewImage({
					current: e.currentTarget.id,
					urls: this.imgs
				})
			},

			treaty: function() {
				uni.navigateTo({
					url: '/pageschild/news/newsDetail/newsDetail?nid=4'
				});
			},
			
			chooseImages: async function(e) {
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					count: 1,
					success: (res) => {
						let max_size = 5 * 1024 * 1024;
						// #ifdef H5
						if (res.tempFiles[0].type.indexOf("image") < 0) {
							this.tui.toast("请选择图片类型的文件");
							return;
						}
						// #endif
						
						if (res.tempFiles[0].size >= max_size) {
							this.tui.toast("上传图片不能超过5M");
							return;
						}
				       
						let token = this.tui.getToken();
						let datas = {
							token: token,
							image: res.tempFiles[0].name,
						};
						let uper = this.tui.uploadFile('shop', datas, res.tempFilePaths[0], 'applyFile');
						Promise.resolve(uper).then((value) => {
							if (value.code == 200) {
								this.imgs.push(value.data.file_path);
							} else {
								this.tui.toast(value.message);
							}
						})
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						// #endif
					}
				})
			},
			formSubmit: function(e) {
				//表单规则
				let rules = [{
					name: "shop_address",
					rule: ["required"], //可使用区间，此处主要测试功能
					msg: ["请输入详细地址"]
				}, {
					name: "shop_phone",
					rule: ["required"],
					msg: ["请输入商家电话"]
				}, {
					name: "begtime",
					rule: ["required"],
					msg: ["请输入开始营业时间"]
				}, {
					name: "endtime",
					rule: ["required", "isAmount"],
					msg: ["请输入结束营业时间"]
				}, {
					name: "shop_description",
					rule: ["required"],
					msg: ["请输入商家介绍"]
				}];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
			
					if (this.imgs.length == 0) {
						this.tui.toast('门店图片不能为空');
						return;
					}
					let token = this.tui.getToken();
					let datas = {
						token: token,
						shop_address: formData.shop_address,
						latitude_longitude:this.latitude_longitude,
						shop_avatar: this.imgs[0],
						shop_phone:formData.shop_phone,
						shop_description:formData.shop_description,
						shop_workingtime:formData.begtime+"-"+formData.endtime
					};
					
		
					this.isloading = true;
					this.isdisabled = true;
					let shopedit = this.tui.request('shop', 'post', datas, 1000, 1, '', 'editShop');
					Promise.resolve(shopedit).then((value) => {
						if (value.code == 200) {
					
							this.isloading = false;
							this.isdisabled = false;
							this.tui.toast(value.message);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pageschild/shop/index'
								});
							}, 800)
						} else {
							this.tui.toast(value.message);
							this.isloading = false;
							this.isdisabled = false;
						}
					})
				} else {
					this.tui.toast(checkRes);
					return;
				}
			},
			
			deleteImage: function(e) {
				const index = e.index;
				this.imgs.splice(index, 1);
			},
			
		},
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
		margin-top: 20rpx;
		color: #333;
	}

	/* picker start*/

	.tui-mask-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
    .tui-textarea {
    	border: 2rpx solid #efeeee;
    	height: 120rpx;
    	border-radius: 10rpx;
    	padding: 10rpx;
    	font-size: 26rpx;
    	/* 		background:#f8f7f6; */
    }
	.tui-upload-item {
		width: 146rpx;
		height: 146rpx;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	
	}
	
	.tui-upload-del {
		position: absolute;
		right: -18rpx;
		top: -18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-picker-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		background: #fff;
	}

	.tui-pickerbox-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 32rpx;
		background: #fff;
	}

	.tui-list-item::after {
		left: 0;
	}

	.btn-cancle {
		padding: 20rpx;
		color: #888;
	}

	.btn-sure {
		padding: 20rpx;
		color: #5677fc;
	}

	.picker-view {
		width: 100%;
		height: 260px;
	}

	.item {
		text-align: center;
	}

	.picker-item {
		text-align: center
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
    .tui-upload-img {
    	width: 146rpx;
    	height: 146rpx;
    	display: block;
    }
	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.ag_title {
		margin: 40rpx 40rpx 0 30rpx;
		display: flex;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 20rpx;
	}

	.uni-uploader__img {
		width: 100%;
		height: 100%;
	}

	.tui-input {
		width: 500rpx;
		font-size: 28rpx;
	}

	.agreement {
		color: #ff241d
	}

	.tui-btn__box {
		width: 100%;
		padding: 20px 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.fin-list {
		justify-content: space-between;
	}

	.fin_img {
		border: 1px dashed #d9d8d8;
		border-radius: 10rpx;
		width: 146rpx;
		height: 146rpx;
		margin: 1rpx 0;
	}

	.icon_cam {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;
	}

	.fin_txt {
		font-size: 20rpx;
		text-align: center;
		color: #707070
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}
    .yui-location{
		position: absolute;
		right:20rpx;
		color:#ee980e;
		font-size: 24rpx;
	}
	.yui-location-icon{
		color:#f00
	}
	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #E41F19;
		border-color: #E41F19;
		color: #fff;
	}

	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
</style>
